<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<%@ taglib tagdir="/WEB-INF/tags" prefix="matrix"%>
<%@ taglib uri="http://matrixcsm.zkingsoft.com" prefix="cms"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp">
<title data-index="0" id="selextTitle">${网页标题 }</title>
<meta name="keywords" content="${网页关键词}">
<meta name="description" content="${网页描述 }" />
<!--[if lt IE 8]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->
<link href="${path }/resource/plugin/bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="${path }/resource/plugin/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="${path }/resource/css/styleOne/animate.min.css" rel="stylesheet" type="text/css" />
<link href="${path }/resource/css/visitor/base.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="${浏览器logo }">
<style>

ul{padding: 0;margin: 0;}
body{font-family: "微软雅黑","苹方黑体";}
.w{background: #ffffff;font-size: 16px;padding:100px 0;color:#666;}
.w ul li{list-style-type: disc;}
.w h4{line-height: 30px;height: 30px;background: url(/matrixCms-web/resource/images/question.png) no-repeat;
      padding-left: 30px;letter-spacing: 1px;background-position: -1px 3px;margin-left:6.6%;}
.side{ margin-top: 10px;margin-left:7%;} 
.side li{height: 25px;line-height: 25px;font-size: 16px;color: #3583CA;cursor: pointer;}
.side li.active{color:#2f71ad;text-decoration: underline;}
.side li:hover{color:#2f71ad;text-decoration: underline;} 
.content{margin-top: 10px;margin-right:6%;}
.content .title{    text-align: center;color: #333;font-size: 20px;height: 35px;}
.content p{word-break: break-all;text-indent: 2em;line-height: 25px;letter-spacing: 1px;font-size: 16px;color:#999}
.content img{max-width:100%;}
</style>
</head>
<body class="">
<jsp:include page="_top.jsp"></jsp:include>
<div class="w" id="app">
	<div class="container">
		<h4>常见问题</h4>
		<ul class="side col-md-2 inside">
         	<li v-for="item in arts" v-on:click="cahngeArt(item.artId)" >{{item.artTitle }}</li>
    	</ul>
		<div class="col-md-9 pull-right">
			
			<div class="content">
				<div class="title">{{currentArt.artTitle}}</div>
				<p v-html="currentArt.artContent"></p>
			</div>
		</div>
	</div>
</div>
	<jsp:include page="_foot.jsp"></jsp:include>
	<script type="text/javascript"
		src="${path }/resource/js/plugin/jquery-2.1.4.min.js"></script>
	<script type="text/javascript"
		src="${path }/resource/js/systools/AjaxProxy.js"></script>
	<script type="text/javascript"
		src="${path }/resource/js/systools/MForm.js"></script>
	<script type="text/javascript"
		src="${path }/resource/model/js/Pagination.js"></script>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<script>
	 
	
	$("#toTop").click(function() {
	      $('body,html').animate({scrollTop:0},500);
	    })
	    $(".suspend").mouseover(function() {
	      $(this).stop();
	      $(this).animate({width: 156}, 400);
	    });
	    $(".suspend").mouseout(function() {
	      $(this).stop();
	      $(this).animate({width:36}, 400);
	    });
	    $("#nav").find("li").eq(5).addClass("active");
	    
	    var app =  new Vue({
			el : '#app',
			data : {
				arts:[],
				currentArt:{}
			},
			methods : {
				toArticle : function(id) {
					window
							.open("${path}/redirect/article?id="
									+ id);
				},
				loadArt:function(){
					$.AjaxProxy({
						c : false,
					}).invoke(
							"${path}/findNews?code=bz",
							function(loj) {
								app.arts = loj.getValue("rows");
								app.currentArt=app.arts[0];
								console.log(app.currentArt.artTitle);
							});
				},
				cahngeArt:function(id){
					console.log(id);
					for(var i=0;i<app.arts.length;i++){
						if(app.arts[i].artId==id){
							app.currentArt=app.arts[i];
							break;
						}
					}
				}
			},
		});
		app.loadArt();
	</script>
	
</body>
</html>
